---
# title: "Ring Color"
title: "轮廓环颜色"
# description: "Utilities for setting the color of outline rings."
description: "用于设置轮廓环颜色的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/ringColor'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  transformProperties: ({ selector, properties }) => {
    delete properties['--tw-ring-opacity']
    return properties
  }
}


<!-- ## Usage

Use the `ring-{color}` utilities to set the color of an [outline ring](/docs/ring-width). -->
## 使用

使用 `ring-{color}` 功能来设置[轮廓环](/docs/ring-width)的颜色。

```html indigo
<template preview class="flex justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-indigo-500 ring-4 ring-indigo-300">
    Button
  </button>
</template>

<button class="... ring-4 **ring-indigo-300**">
  Button
</button>
```

<!-- ### Changing opacity

You can control the opacity of rings using the `ring-opacity-{amount}` utilities: -->
### 改变不透明度

您可以使用 `ring-opacity-{amount}` 功能来控制环的不透明度。

```html amber
<template preview class="flex justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-amber-500 ring-4 ring-amber-500 ring-opacity-50">
    Button
  </button>
</template>

<button class="... ring-4 **ring-yellow-500** **ring-opacity-50**">
  Button
</button>
```

<!-- For more information, see the [ringOpacity documentation](/docs/ring-opacity). -->
更多信息，请参见[ ringOpacity 文档](/docs/ring-opacity)。

---

<!-- ## Responsive

To control the ring color at a specific breakpoint, add a `{screen}:` prefix to any existing ring color utility. For example, use `md:ring-blue-500` to apply the `ring-blue-500` utility at only medium screen sizes and above. -->
## 响应式

要控制特定断点处的环色，请在任何现有的环色功能中添加 `{screen}:` 前缀。例如，使用 `md:ring-blue-500` 来应用 `ring-blue-500` 功能，只适用于中等尺寸以上的屏幕。

```html
<button class="ring-2 ring-blue-300 **md:ring-blue-500**">
  <!-- ... -->
</button>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

---

<!-- ## Customizing

You can customize which ring color utilities are generated by customizing your color palette using the `colors` key in the `theme` section of your `tailwind.config.js` file: -->
## 自定义

您可以通过使用 `tailwind.config.js` 文件中的 `theme` 部分的 `colors` 键自定义您的调色板来生成环色功能。

```js
// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.blueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.yellow,
    }
  }
}
```

<!-- If you'd like to customize only the ring color utilities without affecting your global color palette, use the `ringColor` key instead: -->
如果您想在不影响全局调色板的情况下，只定制环形色功能，请使用 `ringColor` 键。

```js
// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    ringColor: {
      white: colors.white,
      pink: colors.fuchsia,
    }
  }
}
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在[主题定制文档](/docs/theme#-5)中了解更多关于定制默认主题的信息。

<!-- ### Variants -->
### 变体
<Variants plugin="ringColor" />

<!-- ### Disabling -->
### 禁用
<Disabling plugin="ringColor" />
